<template>
  <div>
    <button @click="bol" v-if="bool">点击搜索</button>
    <input ref="inp" v-else type="text" />

    <button @click="uname = 'AccInfo'">info</button>
    <button @click="uname = 'Acc'">acc</button>
    <br />
    <br />
    <input v-foucs type="text" />
    <component :is="uname" />

    <p v-color="color">写代码使我快乐</p>
    <button @click="color = 'red'">修改按钮</button>
  </div>
</template>

<script>
import Acc from "./components/Acc.vue";
import AccInfo from "./components/AccInfo.vue";

export default {
  directives: {
    color: {
      inserted(el, { value }) {
        el.style.color = value;
      },
      update(el, { value }) {
        el.style.color = value;
      }
    }
  },
  components: {
    Acc,
    AccInfo
  },
  data() {
    return {
      bool: true,
      uname: "AccInfo",
      color: "blue"
    };
  },

  methods: {
    bol() {
      this.bool = !this.bool;

      this.$nextTick(() => {
        this.$refs.inp.focus();
      });
    }
  }
};
</script>

<style scoped>
</style>